<template>
  <div>
    <p class="navigation">
      <span @click="historyGo">已关闭项目</span>
      > 查看工时
    </p>
    <div class="tatleFalg">
      <p>项目名称：{{ manHourInfo.projectName }}</p>
      <p>总工时：{{ manHourInfo.totalDay }}天</p>
      <p class="projectFalg">
        <span>项目状态：</span>
        <el-steps :active="activeTitle" align-center finish-status="success">
          <el-step v-for="(item, index) in optionsStatic" :key="index" :title="item.title"
            :description="item.description"></el-step>
        </el-steps>
      </p>
    </div>
    <div class="table-box">
      <el-table border tooltip-effect="dark" :header-cell-style="{ background: '#F9F9F9' }" :data="option"
        highlight-current-row v-loading="tableLoading" show-summary style="width: 100%">
        <el-table-column prop="date" align="center" label="时间"></el-table-column>
        <el-table-column v-for="(item, index) in countList" v-show="item.name" :key="index" :prop="item.name"
          align="center" :label="item.name"></el-table-column>
      </el-table>
      <el-pagination style="text-align: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { workingHoursList } from "@/service/Api.js"; //接口
export default {
  components: {},
  name: "projectMent",
  props: ["projectid"],
  data() {
    return {
      optionsStatic: [
        { id: 1, title: "立项", description: "" },
        { id: 2, title: "需求分析", description: "" },
        { id: 3, title: "编码实现", description: "" },
        { id: 4, title: "内部测试", description: "" },
        { id: 5, title: "线上测试", description: "" },
        { id: 6, title: "上线试运行", description: "" },
        { id: 7, title: "已交付", description: "" },
        { id: 8, title: "项目取消", description: "" },
        { id: 9, title: "项目已关闭", description: "" },
      ],
      pn: 1,
      ps: 10,
      total: 0,
      tableLoading: false,
      manHourInfo: "",
      manHourOption: [],

      option: [],
      countList: [],
      activeTitle: 9,
    };
  },
  created() {
    this.dataList();
  },
  methods: {
    dataList() {
      let data = {
        pn: this.pn,
        ps: this.ps,
        projectId: this.projectid,
      };
      workingHoursList(data).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.manHourInfo = res.data;
          this.manHourOption = res.data.pag.records;
          this.countList = res.data.columns; //人员总工时
          console.log(this.manHourOption);
          let arr = [];
          this.manHourOption = res.data.pag.records; //工时数组
          this.optionsStatic.forEach((element) => {
            this.manHourInfo.projectStatusList.forEach(j => {
              if (element.title == j.content) {
                element.description = j.createTime
              }
            })
          });
          this.manHourOption.forEach((element, index) => {
            let objName;
            console.log(res.data);
            if (res.data.columns.length <= index) {
              objName = "";
            } else {
              objName = res.data.columns[index].name;
            }
            let obj = {
              name: objName,
              date: element.date,
            };
            let newObj = { ...obj, ...element.userAndTime };
            arr.push(newObj);
          });
          console.log(arr, "查看arr");
          this.option = arr;

          this.total = res.data.pag.total;
        }
      });
    },
    historyGo() {
      this.$emit("subset", { falg: 11 });
    },

    // 分页
    handleSizeChange(val) {
      this.ps = val;
      this.dataList();
    },
    handleCurrentChange(val) {
      this.pn = val;
      this.dataList();
    },
  },
};
</script>

<style scoped>
.navigation {
  background: #f0f9eb;
  color: #67c23a;
  padding: 10px;
  margin: 0;
}

.navigation span {
  cursor: pointer;
  font-weight: bold;
}

.tatleFalg {
  padding: 0 10px;
  border: 1px solid #ccc;
}

.tatleFalg .projectFalg {
  display: flex;
}

.tatleFalg .projectFalg span {
  width: 80px;
}

.el-steps--horizontal {
  width: calc(100% - 80px);
}
</style>
